<!--
 * @Author: your name
 * @Date: 2021-08-30 17:07:15
 * @LastEditTime: 2021-09-01 16:18:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\components\Modal\warp.vue
-->
<template>
    <Modal :visible="visible" @cancel="handleCancel">
        <template #title>
            <div class="moda_title">
                <svg-icon :icon-class="icon" :color="iconColor" size="1.2"></svg-icon>
                <span>{{ title }}</span>
            </div>
        </template>
        <template #footer>
            <Button type="primary" ghost @click="handleCancel">
                {{ keyFun("Modal.cancel") }}
            </Button>
            <Button
                type="primary"
                ghost
                :loading="loading"
                @click="handleok"
            >
                {{ $t("Modal.oktext") }}
            </Button>
        </template>
        <slot></slot>
    </Modal>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { Modal, Button } from 'ant-design-vue'
import i18n from '../../setting/locales/setlocales'

const { t } = i18n.global
const props = {
    // 是否展示
    visible: {
        type: [String, Boolean],
        default: () => false,
    },
    // 图标
    icon: {
        type: [String],
        default: () => 'home',
    },
    // 图标颜色
    iconColor: {
        type: [String],
        default: () => '#ccc',
    },
    // 标题
    title: {
        type: String,
        default: () => '标题',
    },
    // 按钮loading
    loading: {
        default: () => false,
    },
}
export default defineComponent({
    name: 'Asdasd',
    components: {
        Modal,
        Button,
    },
    props,
    setup(props, { emit }) {
        const handleCancel = () => {
            // emit 事件派发 第二个参数不能为false
            emit('handleclick', 'cancel')
        }
        const handleok = () => {
            emit('handleclick', 'ok')
        }
        // 国际化
        const keyFun = (key) => t(key)
        return {
            handleCancel,
            handleok,
            keyFun,
        }
    },
})
</script>

<style lang="less" scoped>
.moda_title {
  display: flex;
  align-items: center;
  & > span {
    margin-left: 10px;
    font-size: 14px;
    font-weight: bold;
  }
}
</style>
